<template>
  <div class="login-container">
    <div class="floating-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>

    <div class="login-box">
      <div class="login-left">
        <div class="brand-area">
          <div class="brand-logo">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 4L4 16V40H14V26H34V40H44V16L24 4Z" fill="currentColor"/>
              <path d="M24 8L8 17.6V36H12V22H36V36H40V17.6L24 8Z" fill="currentColor" opacity="0.3"/>
            </svg>
          </div>
          <div class="brand-title">
            <h1>校园智能门锁管理系统</h1>
            <div class="brand-subtitle">Campus Smart Lock Management System</div>
          </div>
        </div>

        <div class="city-illustration">
          <div class="building building-1">
            <div class="roof"></div>
            <div class="windows"></div>
            <div class="window-grid">
              <div class="window" v-for="n in 21" :key="'b1-'+n"></div>
            </div>
          </div>
          <div class="building building-2">
            <div class="windows"></div>
            <div class="school-sign">SCHOOL</div>
          </div>
          <div class="building building-3">
            <div class="windows"></div>
            <div class="clock-tower"></div>
          </div>
          <div class="building building-4">
            <div class="windows"></div>
            <div class="library-sign">图书馆</div>
          </div>
          <div class="building building-5">
            <div class="windows"></div>
            <div class="campus-gate"></div>
          </div>
        </div>

        <div class="features-panel">
          <div class="feature-card" v-for="(feature, index) in features" :key="index">
            <div class="feature-icon">
              <i :class="feature.icon"></i>
            </div>
            <div class="feature-content">
              <h3>{{feature.title}}</h3>
              <p>{{feature.desc}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="login-right">
        <div class="login-form-wrapper">
          <div class="login-welcome">
            <h2>欢迎使用</h2>
            <p v-if="!tempSecret">请登录您的账号以访问校园智能门锁管理系统</p>
            <p v-else-if="loading" class="temp-secret-login-tip">
              <i class="el-icon-loading"></i>
              正在登录，请稍候...
            </p>
            <p v-else>请登录您的账号以访问校园智能门锁管理系统</p>
          </div>

          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" v-if="!tempSecret || !loading">
            <el-form-item prop="username">
              <label class="form-label">工号/学号</label>
              <el-input
                v-model="loginForm.username"
                type="text"
                auto-complete="off"
                placeholder="请输入工号或学号"
              >
                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <label class="form-label">密码</label>
              <el-input
                v-model="loginForm.password"
                type="password"
                auto-complete="off"
                placeholder="请输入您的密码"
                @keyup.enter.native="handleLogin"
              >
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>

            <el-form-item prop="code" v-if="captchaEnabled">
              <label class="form-label">验证码</label>
              <div class="verification-code-input">
                <el-input
                  v-model="loginForm.code"
                  auto-complete="off"
                  placeholder="请输入验证码"
                  @keyup.enter.native="handleLogin"
                >
                  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                </el-input>
                <div class="captcha-img" @click="getCode">
                  <img :src="codeUrl" alt="验证码" />
                </div>
              </div>
            </el-form-item>

            <div class="login-options">
              <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
              <el-checkbox v-model="loginForm.autoLogin">自动登录</el-checkbox>
              <!-- <a href="#" class="forgot-link">忘记密码?</a> -->
            </div>

            <div class="form-actions">
              <el-button
                :loading="loading"
                class="login-button"
                type="primary"
                @click.native.prevent="handleLogin"
              >
                <span v-if="!loading">登 录</span>
                <span v-else>登录中...</span>
              </el-button>

              <div class="register-option" v-if="register">
                <span>还没有账号?</span>
                <router-link class="register-link" :to="'/register'">立即注册</router-link>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <div class="login-footer">
      <div class="footer-content">
        <p>© 2023-2024 校园智能门锁管理系统 All Rights Reserved.</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import { authBinding } from "@/api/system/auth";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        autoLogin: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined,
      tempSecret: undefined,
      // 功能特点
      features: [
        {
          icon: 'el-icon-lock',
          title: '教室智能门锁',
          desc: '远程开关锁、授权管理、状态监控'
        },
        {
          icon: 'el-icon-data-line',
          title: '考勤统计',
          desc: '师生进出记录、教室使用情况分析'
        },
        {
          icon: 'el-icon-user',
          title: '权限管理',
          desc: '教师权限、学生权限、临时权限分配'
        }
      ]
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
        this.tempSecret = route.query && route.query.tempSecret;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie();

    // 检查是否有临时秘钥，如果有则自动登录
    if (this.tempSecret) {
      this.$nextTick(() => {
        this.handleTempSecretLogin();
      });
    }
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe');
      const autoLogin = Cookies.get('autoLogin');
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        autoLogin: autoLogin === undefined ? false : Boolean(autoLogin),
        code: "",
        uuid: ""
      };

      // 如果设置了自动登录且有用户名密码，并且没有临时秘钥，则自动触发登录
      if (this.loginForm.autoLogin && username && password && !this.tempSecret) {
        this.$nextTick(() => {
          this.handleLogin();
        });
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }

          if (this.loginForm.autoLogin) {
            Cookies.set('autoLogin', this.loginForm.autoLogin, { expires: 30 });
          } else {
            Cookies.remove('autoLogin');
          }

          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: "/indexplats"}).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    },

    /**
     * 临时秘钥登录
     */
    handleTempSecretLogin() {
      if (!this.tempSecret) {
        this.$message.error('临时秘钥不能为空');
        return;
      }

      this.loading = true;

      // 调用store中的临时秘钥登录action
      this.$store.dispatch('TempSecretLogin', this.tempSecret).then(() => {
        // 跳转到指定页面，让路由守卫处理用户信息获取和路由生成
        const redirect = this.redirect || '/indexplats';
        this.$router.push({ path: redirect }).catch(() => {});

        this.$message.success('登录成功');
      }).catch(error => {
        this.loading = false;
        console.error('临时秘钥登录失败:', error);

        // 显示错误信息
        let errorMsg = '登录失败，请重试';
        if (error.response && error.response.data && error.response.data.msg) {
          errorMsg = error.response.data.msg;
        } else if (error.msg) {
          errorMsg = error.msg;
        }

        this.$message.error(errorMsg);

        // 登录失败时清除URL中的tempSecret参数，避免重复尝试
        this.$router.replace({
          path: '/login',
          query: this.redirect ? { redirect: this.redirect } : {}
        }).catch(() => {});
      });
    }
  }
};
</script>

<style lang="scss">
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes floatReverse {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes slideInUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes windowsLight {
  0%, 100% { opacity: 0.05; background-color: rgba(255, 255, 255, 0.05); }
  30% { opacity: 0.2; background-color: rgba(52, 152, 219, 0.1); }
  70% { opacity: 0.15; background-color: rgba(155, 89, 182, 0.1); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes lockGlow {
  0% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
  50% { box-shadow: 0 0 15px rgba(52, 152, 219, 0.8); }
  100% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
}

.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background: linear-gradient(135deg, #1a2a3a, #2c3e50);
  overflow: hidden;
}

.floating-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;

  .shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(66, 99, 171, 0.08), rgba(63, 135, 166, 0.08));
    animation: float 15s ease-in-out infinite;

    &-1 {
      width: 300px;
      height: 300px;
      top: -150px;
      left: -100px;
      animation-duration: 20s;
    }

    &-2 {
      width: 200px;
      height: 200px;
      top: 10%;
      right: -100px;
      animation-duration: 25s;
      animation-delay: 2s;
    }

    &-3 {
      width: 150px;
      height: 150px;
      bottom: 10%;
      left: 15%;
      animation-duration: 18s;
      animation-delay: 1s;
    }

    &-4 {
      width: 250px;
      height: 250px;
      bottom: -100px;
      right: 10%;
      animation-duration: 22s;
      animation-delay: 3s;
    }
  }
}

.login-box {
  display: flex;
  width: 900px;
  max-width: 90%;
  min-height: 550px;
  position: relative;
  z-index: 2;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  overflow: hidden;
  animation: slideInUp 0.5s ease-out;
}

.login-left {
  flex: 1.2;
  background: #1a1f2c;
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 30px 30px;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 35%, rgba(63, 81, 181, 0.08), transparent 50%),
               radial-gradient(circle at 80% 70%, rgba(33, 150, 243, 0.08), transparent 50%);
    z-index: 0;
  }
}

.brand-area {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  margin-bottom: 25px;
  background: rgba(26, 31, 44, 0.8);
  padding: 10px;
  border-radius: 8px;
}

.brand-logo {
  margin-right: 12px;
  color: #fff;

  svg {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.2));
  }
}

.brand-title {
  h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    background: linear-gradient(to right, #fff, #a0cfff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .brand-subtitle {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 3px;
    letter-spacing: 0.3px;
  }
}

.city-illustration {
  position: relative;
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto 20px;
  z-index: 1;
  width: 90%;
  animation: pulse 8s ease-in-out infinite;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, rgba(52, 152, 219, 0.2), rgba(155, 89, 182, 0.3), rgba(52, 152, 219, 0.2));
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
  }

  .building {
    position: relative;
    background: linear-gradient(to bottom, #2c3e50, #1a2530);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    transform: translateZ(0);
    overflow: hidden;
    top: 45px;
    transition: all 0.3s ease;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      background-image:
        linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 5%, rgba(0,0,0,0) 95%, rgba(0,0,0,0.1) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 20%);
      z-index: 1;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(to right, #3498db, #9b59b6);
      z-index: 2;
    }

    .school-sign {
      position: absolute;
      top: 10px;
      font-size: 8px;
      color: #fff;
      background: rgba(52, 152, 219, 0.7);
      padding: 2px 4px;
      border-radius: 2px;
      font-weight: bold;
      letter-spacing: 0.5px;
      z-index: 10;
    }

    .library-sign {
      position: absolute;
      top: 15px;
      font-size: 8px;
      color: #fff;
      background: rgba(231, 76, 60, 0.7);
      padding: 2px 4px;
      border-radius: 2px;
      z-index: 10;
    }

    .campus-gate {
      position: absolute;
      bottom: 0;
      width: 20px;
      height: 15px;
      background: rgba(241, 196, 15, 0.8);
      border-radius: 8px 8px 0 0;
      z-index: 10;

      &:before, &:after {
        content: '';
        position: absolute;
        top: 5px;
        width: 3px;
        height: 10px;
        background: #2c3e50;
      }

      &:before {
        left: 5px;
      }

      &:after {
        right: 5px;
      }
    }

    .clock-tower {
      position: absolute;
      top: -12px;
      width: 12px;
      height: 20px;
      background: rgba(52, 152, 219, 0.5);
      z-index: 10;
      border-radius: 6px 6px 0 0;

      &:before {
        content: '';
        position: absolute;
        top: 4px;
        left: 3px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.6;
      }
    }

    .windows {
      position: absolute;
      top: 8px;
      bottom: 0;
      left: 4px;
      right: 4px;
      z-index: 1;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(1px);
      }
    }

    .window-grid {
      position: absolute;
      top: 6px;
      bottom: 4px;
      left: 4px;
      right: 4px;
      display: grid;
      gap: 4px;
      z-index: 2;

      .window {
        border-radius: 1px;
        background-color: rgba(52, 152, 219, 0.05);
        backdrop-filter: blur(2px);
        position: relative;
        overflow: hidden;

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            rgba(255, 255, 255, 0.05) 60%,
            rgba(255, 255, 255, 0.1) 100%);
          opacity: 0;
          transition: opacity 1s;
          animation: windowsLight 5s ease-in-out infinite;
          animation-delay: calc(var(--delay) * 1s);
        }
      }
    }

    .roof {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 8px;
      z-index: 3;
      overflow: hidden;
    }
  }

  .building-1 {
    height: 140px;
    width: 70px;
    z-index: 5;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to bottom, #2c3e50, #1a2935);
    animation: float 8s ease-in-out infinite;

    .roof {
      background: linear-gradient(to right, #3498db, #2980b9);
      height: 6px;
      border-radius: 6px 6px 0 0;
    }

    .window-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(7, 1fr);
    }

    &:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
    }
  }

  .building-2 {
    height: 170px;
    width: 80px;
    z-index: 4;
    margin-left: -25px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(to bottom, #34495e, #2c3e50);
    animation: floatReverse 10s ease-in-out infinite;
    animation-delay: 0.5s;

    .roof {
      background: linear-gradient(to right, #9b59b6, #8e44ad);
      border-radius: 8px 8px 0 0;
    }

    .window-grid {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(8, 1fr);
    }

    &::before {
      background-image:
        linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,0.15) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 30%);
    }

    &:hover {
      transform: translateY(-12px) rotate(-1deg);
      box-shadow: 0 12px 18px rgba(0, 0, 0, 0.4);
    }
  }

  .building-3 {
    height: 190px;
    width: 85px;
    z-index: 3;
    margin-left: -20px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to bottom, #375470, #2c3e50);
    animation: float 12s ease-in-out infinite;
    animation-delay: 1s;

    &::after {
      background: linear-gradient(to right, #1abc9c, #16a085);
    }

    .window-grid {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(10, 1fr);
    }

    .roof {
      background: #1abc9c;
      height: 10px;
      border-radius: 2px 2px 0 0;
      overflow: visible;

      &::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 20px;
        background: linear-gradient(to bottom, #3498db, #1abc9c);
        border-radius: 5px 5px 0 0;
      }
    }

    &:hover {
      transform: translateY(-15px);
      box-shadow: 0 15px 20px rgba(0, 0, 0, 0.4);
    }
  }

  .building-4 {
    height: 160px;
    width: 65px;
    z-index: 2;
    margin-left: -18px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(to bottom, #2c3e50, #243342);
    animation: floatReverse 9s ease-in-out infinite;
    animation-delay: 0.2s;

    .roof {
      background: linear-gradient(to right, #e74c3c, #c0392b);
      height: 8px;
      border-radius: 20px 20px 0 0;
    }

    .window-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(9, 1fr);
      border-radius: 15px 15px 0 0;
      top: 12px;
    }

    &:hover {
      transform: translateY(-8px) rotate(1deg);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    }
  }

  .building-5 {
    height: 120px;
    width: 55px;
    z-index: 1;
    margin-left: -15px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(to bottom, #2c3e50, #1a242f);
    animation: float 11s ease-in-out infinite;
    animation-delay: 1.5s;

    .roof {
      background: linear-gradient(to right, #f1c40f, #f39c12);
      border-radius: 10px 10px 0 0;
    }

    .window-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(6, 1fr);
    }

    &:hover {
      transform: translateY(-7px) rotate(-0.5deg);
      box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3);
    }
  }

  // 新增一些额外的建筑物，使城市天际线更加丰富
  .building-6 {
    height: 130px;
    width: 50px;
    z-index: 0;
    margin-left: -10px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to bottom, #2c3e50, #212f3d);
    animation: floatReverse 12s ease-in-out infinite;
    animation-delay: 0.7s;

    .roof {
      background: linear-gradient(to right, #2ecc71, #27ae60);
      border-radius: 5px 5px 0 0;
    }

    .window-grid {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(7, 1fr);
    }

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    }
  }
}

// 添加用于初始化窗户灯光动画延迟的样式
.city-illustration {
  .building-1 .window-grid .window:nth-child(3n+1) { --delay: 0.1; }
  .building-1 .window-grid .window:nth-child(3n+2) { --delay: 0.5; }
  .building-1 .window-grid .window:nth-child(3n+3) { --delay: 0.9; }

  .building-2 .window-grid .window:nth-child(4n+1) { --delay: 0.2; }
  .building-2 .window-grid .window:nth-child(4n+2) { --delay: 0.6; }
  .building-2 .window-grid .window:nth-child(4n+3) { --delay: 1.0; }
  .building-2 .window-grid .window:nth-child(4n+4) { --delay: 1.4; }

  .building-3 .window-grid .window:nth-child(4n+1) { --delay: 0.3; }
  .building-3 .window-grid .window:nth-child(4n+2) { --delay: 0.7; }
  .building-3 .window-grid .window:nth-child(4n+3) { --delay: 1.1; }
  .building-3 .window-grid .window:nth-child(4n+4) { --delay: 1.5; }

  .building-4 .window-grid .window:nth-child(3n+1) { --delay: 0.4; }
  .building-4 .window-grid .window:nth-child(3n+2) { --delay: 0.8; }
  .building-4 .window-grid .window:nth-child(3n+3) { --delay: 1.2; }

  .building-5 .window-grid .window:nth-child(3n+1) { --delay: 0.2; }
  .building-5 .window-grid .window:nth-child(3n+2) { --delay: 0.6; }
  .building-5 .window-grid .window:nth-child(3n+3) { --delay: 1.0; }

  .building-6 .window-grid .window:nth-child(2n+1) { --delay: 0.3; }
  .building-6 .window-grid .window:nth-child(2n+2) { --delay: 0.9; }
}

.features-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.feature-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
  animation: slideInUp 0.4s ease-out forwards;
  opacity: 0;

  &:nth-child(1) { animation-delay: 0.1s; }
  &:nth-child(2) { animation-delay: 0.2s; }
  &:nth-child(3) { animation-delay: 0.3s; }

  &:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;

    i {
      font-size: 16px;
      color: #fff;
      transition: all 0.3s;
    }
  }

  &:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, #2980b9, #3498db);
    animation: lockGlow 2s infinite;
  }

  .feature-content {
    h3 {
      font-size: 13px;
      margin: 0 0 4px;
      font-weight: 600;
      color: #fff;
    }

    p {
      font-size: 11px;
      margin: 0;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.3;
    }
  }
}

.login-right {
  flex: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px;
}

.login-form-wrapper {
  width: 90%;
  max-width: 360px;
}

.login-welcome {
  text-align: center;
  margin-bottom: 30px;

  h2 {
    font-size: 24px;
    color: #333;
    margin: 0 0 8px;
    font-weight: 700;
  }

  p {
    color: #666;
    font-size: 14px;
    margin: 0;
  }

  .temp-secret-login-tip {
    color: #3498db;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    i {
      animation: el-icon-loading 2s infinite linear;
    }
  }
}

.login-form {
  .el-form-item {
    margin-bottom: 20px;
  }

  .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #333;
    font-weight: 500;
  }

  .el-input {
    .el-input__inner {
      height: 42px;
      border-radius: 8px;
      border: 1px solid #dcdfe6;
      transition: all 0.2s;
      padding-left: 42px;
      font-size: 14px;

      &:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
      }

      &:hover {
        border-color: #c0c4cc;
      }
    }

    .input-icon {
      color: #909399;
      font-size: 16px;
      height: 42px;
      width: 42px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.verification-code-input {
  display: flex;
  align-items: center;
  gap: 8px;

  .el-input {
    flex: 1;
  }

  .captcha-img {
    width: 100px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ebeef5;
    transition: all 0.2s;

    &:hover {
      border-color: #c0c4cc;
      transform: scale(1.02);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .forgot-link {
    color: #3498db;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;

    &:hover {
      color: #2980b9;
      text-decoration: underline;
    }
  }

  .el-checkbox {
    color: #606266;
    font-size: 13px;

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #3498db;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #3498db;
      border-color: #3498db;
    }
  }
}

.form-actions {
  .login-button {
    width: 100%;
    height: 42px;
    border-radius: 8px;
    font-size: 15px;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border: none;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transform: scale(1);
      transform-origin: center;
      animation: lockGlow 2s infinite;
      z-index: 1;
      opacity: 0;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(41, 128, 185, 0.3);

      &::before {
        opacity: 1;
      }
    }

    &:active {
      transform: translateY(0);
    }
  }

  .register-option {
    margin-top: 20px;
    text-align: center;
    color: #606266;
    font-size: 13px;

    .register-link {
      color: #3498db;
      text-decoration: none;
      margin-left: 5px;
      font-weight: 500;
      transition: all 0.2s;

      &:hover {
        color: #2980b9;
        text-decoration: underline;
      }
    }
  }
}

.login-footer {
  width: 100%;
  padding: 15px 0;
  position: relative;
  z-index: 2;
  margin-top: 20px;

  .footer-content {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;

    p {
      margin: 0;
    }
  }
}

// Responsive design
@media (max-width: 768px) {
  .login-box {
    flex-direction: column;
    width: 95%;
    max-width: 450px;
    min-height: auto;
  }

  .login-left {
    padding: 25px 20px;
  }

  .features-panel {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .city-illustration {
    height: 120px;
    justify-content: center;
  }

  .feature-card {
    padding: 8px;

    .feature-content {
      h3 {
        font-size: 11px;
      }

      p {
        font-size: 10px;
      }
    }

    .feature-icon {
      width: 26px;
      height: 26px;
      margin-bottom: 6px;

      i {
        font-size: 14px;
      }
    }
  }

  .login-right {
    padding: 25px 20px;
  }
}
</style>
